<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
body{ font-size: 12px;} 
h2,h3{ margin: 0;} 
ul{ margin: 0; padding: 0; list-style: none; } 
#outer_wrap li{ padding-left: 30px; line-height: 24px;} 
.controlSymbol{ padding: 0 5px; border: 1px solid #adff2f; cursor: pointer;} 
</style>
<script type="text/javascript">
var innerText = document.innerText ? 'innerText' : 'textContent'; 
var span = document.createElement('span'); 
span[innerText] = '-'; 
span.className = 'controlSymbol'; 

function $(id){ 
return document.getElementById(id); 
} 
function $_(){ 
var args = arguments; 
var ret = []; 
for(var i = 0; i < args.length; i++){ 
var temp = document.getElementsByTagName(args[i]); 
try{ 
ret = ret.concat(Array.prototype.slice.call(temp,0)); 
}catch(e){ 
for(var j = 0; j < temp.length; j++){ 
ret.push(temp[j]); 
} 
} 
} 
return ret; 
} 
function addSymbol(h){ 
var innerSpan = span.cloneNode(true); 
h.insertBefore(innerSpan,h.firstChild); 
} 
function next(el){ 
while(el.nextSibling){ 
if(el.nextSibling.nodeType == 1){ 
return el.nextSibling; 
} 
el = el.nextSibling; 
} 
return null; 
} 
var outerWrap = $('outer_wrap'); 
var hs = $_('h2','h3'); 
for(var i = 0 ; i < hs.length; i++){ 
addSymbol(hs[i]); 
} 
outerWrap.onclick = function(event){ 
event = event || window.event; 
var t = event.target || event.srcElement; 
if(t.className == 'controlSymbol'){ 
var sn = next(t.parentNode); 
var snStyle = next(t.parentNode).style; 
snStyle.display = (snStyle.display == 'block' || snStyle.display == '') ? 'none' : 'block'; 
t[innerText] = t[innerText] == '+' ? '-':'+'; 
} 
} 
</script> 
</head> 
<body> 
<ul id="outer_wrap"> 
<li> 
<h2>标题1</h2> 
<ul> 
<li>内容1</li> 
<li>内容2</li> 
<li>内容3</li> 
<li>内容4</li> 
<li> 
<h3>标题1_1</h3> 
<ul> 
<li>内容1_1</li> 
<li>内容1_2</li> 
<li>内容1_3</li> 
<li>内容1_4</li> 
</ul> 
</li> 
<li> 
<h3>标题1_2</h3> 
<ul> 
<li>内容1_1</li> 
<li>内容1_2</li> 
<li>内容1_3</li> 
<li>内容1_4</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html>
